<template>
  <div class="play-page-foot">
    <div class="like">
      <i class="iconfont icon-xihuan"></i>
      <i class="iconfont icon-xiazai"></i>
      <i class="iconfont icon-gechang"></i>
      <i class="iconfont icon-diandian"></i>
    </div>
    <div class="progress">
      <div class="time">
        {{ Math.floor(value / 60) }}:{{
          (value % 60).toFixed(0) > 9
            ? (value % 60).toFixed(0)
            : 0 + (value % 60).toFixed(0)
        }}
      </div>
      <input
        type="range"
        v-model="value"
        :min="0"
        :max="duration"
        @input="inputing = true"
        @change="
          inputing = false;
          $emit('updata:currenTime', value);
        "
      />

      <div class="bg-line">
        <div
          class="bg"
          :style="{ width: `${(value / duration) * 100}%` }"
        ></div>
      </div>
      <div class="alltime">
        {{ Math.floor(time / 60) }}:{{
          (time % 60).toFixed(0) > 9
            ? (time % 60).toFixed(0)
            : 0 + (time % 60).toFixed(0)
        }}
      </div>
    </div>
    <div class="play-bar">
      <i class="iconfont icon-xunhuan"></i>
      <i class="iconfont icon-shangyishou" @click="$emit('pre-song')"></i>
      <i
        class="iconfont icon-play1"
        v-if="!played"
        @click="$emit('playing')"
      ></i>
      <i class="iconfont icon-zanting1" v-else @click="$emit('paused')"></i>
      <i class="iconfont icon-xiayishou" @click="$emit('next-song')"></i>
      <i class="iconfont icon-playlist-play" @click="$emit('Show-List')"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    duration: Number,
    durationchange: Number,
    played: Boolean,
  },
  data: function () {
    return {
      value: 0,
      inputing: false,
    };
  },
  computed: {
    time: function () {
      return this.duration - this.durationchange;
    },
  },
  watch: {
    durationchange: function (n) {
      if (!this.inputing) {
        this.value = n;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.play-page-foot {
  height: 100px;

  .like {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 5px;
    i {
      font-size: 24px;
      color: whitesmoke;
    }
  }

  .progress {
    position: relative;
    height: 10px;

    .time {
      position: absolute;
      left: 0;
      top: 0;

      height: 10px;
      font-size: 5px;
      text-align: center;
      line-height: 10px;
      color: #ccc;
    }
    .alltime {
      position: absolute;
      right: 0;
      top: 0;
      color: #ccc;
      height: 10px;
      font-size: 5px;
      text-align: center;
      line-height: 10px;
    }
    input {
      width: 70%;
      padding: 0;
      height: 5px;
      position: absolute;
      top: 0;
      right: calc(50% - (70% / 2));
      opacity: 0;
    }
    .bg-line {
      width: 70%;
      height: 100%;

      position: absolute;
      z-index: -1;
      top: 0;
      right: calc(50% - (70% / 2));

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 10px;
        height: 5px;
        background: rgba(255, 0, 0, 0.363);

        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 6px;
          margin-right: -6px;
          height: 6px;
          background: rgba(0, 123, 0, 1);
          border-radius: 50%;
        }
      }
    }
  }
  .play-bar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    i {
      font-size: 26px;
      color: whitesmoke;
      line-height: 48px;

      &:nth-child(3) {
        font-size: 36px;
      }
    }
  }
}
</style>